<template>
    <div>
        <el-breadcrumb separator="/" style="margin-bottom: 20px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/business' }">后台管理系统</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-input v-model="searchName" placeholder="请输入订单号查询" style="width: 35%; margin-bottom: 20px" clearable></el-input>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">全部订单</el-menu-item>
            <el-menu-item index="2">未发货订单</el-menu-item>
        </el-menu>
        <el-table
                :data="filterData"
                stripe
                style="width: 100%; text-align: center;">
            <el-table-column
                    type="index"
                    label="#"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="_id"
                    label="订单编号"
                    width="230">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="下单时间"
                    width="200"
            >
            </el-table-column>
            <el-table-column
                    type="expand"
                    label="购买商品"
                    width="100"
            >
                <template slot-scope="scope">
                    <buy-goods-message :table-data="scope.row.goodsMessage"></buy-goods-message>
                </template>
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="联系方式及地址"
                    width="500"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <p>{{getAddress(scope)}}</p>
                </template>
            </el-table-column>
            <el-table-column
                    prop="delivery"
                    label="物流单号"
                    width="230"
            >
                <template slot-scope="scope">
                    <p v-if="scope.row.delivery">{{scope.row.delivery}}</p>
                    <el-button v-else type="info" size="small" @click="addDelivery(scope.row._id)">填写订单号</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="lssue"
                    label="是否发出"
                    width="180"
            >
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.lssue" type="success">已发出</el-tag>
                    <el-tag v-else type="info">未发出</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <shade v-show="add"></shade>
        <div class="delivery-from" v-show="add">
            <i class="el-icon-error close" @click="close"></i>
            <p>请输入物流单号：</p>
            <el-input v-model="delivery" @input="inputDelivery"></el-input>
            <i v-show="errCode == 1" style="color: red; font-size: 12px;">物流单号由数字组成且不为空</i>
            <el-button type="primary" :disabled="able" @click="submitDelivery">提交订单号</el-button>
        </div>
    </div>
</template>

<script>
    import BuyGoodsMessage from "./BuyGoodsMessage";
    import Shade from "../../../components/common/shade/Shade";
    import {sendwithpost} from "../../../network/profile";

    export default {
        name: "BusinessOrder",
        data() {
            return {
                orders: [],
                activeIndex: '1',
                add: false,
                delivery: '',
                errCode: null,
                able: false,
                id: '',
                isAll: true,
                searchName: ''
            }
        },
        created() {
            this.getDate()
        },
        computed: {
            filterData() {
                if (this.isAll) {
                    return this.orders.filter(item=> item._id.includes(this.searchName))
                }else {
                    return this.orders.filter(item=> item.lssue).filter(item=> item._id.includes(this.searchName))
                }
            }
        },
        components: {
            BuyGoodsMessage,
            Shade
        },
        methods: {
            handleSelect(key) {
                if (key == 1) {
                    this.isAll = true
                }else if (key == 2){
                    this.isAll = false
                }
            },
            getDate() {
                sendwithpost({
                    url: '/getBusinessOrders'
                }).then(res=> {
                    console.log(res)
                    this.$message({
                        showClose: true,
                        message: res.data.message,
                        type: res.data.type
                    })
                    if (res.data.res_code == 2) {
                        this.orders = res.data.data
                    }
                })
            },
            getAddress(scope) {
                return '姓名：' + scope.row.address.name + '   电话：' + scope.row.address.tel + '    地址：' + scope.row.address.city + scope.row.address.detailed
            },
            addDelivery(id) {
                this.add = true
                this.id = id
            },
            close() {
                this.add = false
                this.delivery = ''
                this.id = ''
            },
            inputDelivery() {
                let isNum = /^[0-9][0-9]*[0-9]$/
                if (!isNum.test(this.delivery)) {
                    this.errCode = 1
                    this.able = true
                }else {
                    this.errCode = null
                    this.able = false
                }
            },
            submitDelivery() {
                sendwithpost({
                    url: '/addDelivery',
                    data: {
                        id: this.id,
                        delivery: this.delivery
                    }
                }).then(res=> {
                    this.$message({
                        showClose: true,
                        message: res.data.message,
                        type: res.data.type
                    })
                    this.add = false
                    this.delivery = ''
                    if (res.data.res_code == 2) {
                        this.getDate()
                    }
                })
            },
        }
    }
</script>

<style scoped>
 .delivery-from {
     position: fixed;
     width: 300px;
     height: 200px;
     z-index: 9;
     top: 50%;
     left: 50%;
     background-color: #fff;
     transform: translate(-50%,-50%);
     padding: 50px;
     display: flex;
     flex-flow: column nowrap;
     justify-content: space-around;
 }
    .delivery-from .close {
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
        color: #999999;
    }
</style>